import styles from './index.module.scss'
import Image from '@c/image'
import Link from 'next/link'
import cm from 'classnames'
import { useWindowWidth } from '@/utils/hooks'
import { useEffect, useState } from 'react'

const Index = props => {
  const { data, top = 24, name, bottom = 0 } = props
  const { count } = useWindowWidth()
  const [expend, setExpend] = useState(false)
  const [len, setLen] = useState(data.length)
  useEffect(() => {
    setLen(expend ? data.length : count * 2)
  }, [expend, count])

  if (!data.length) {
    return null
  }

  return (
    <div className={styles.list} style={{ marginTop: top, marginBottom: bottom }}>
      <div className={styles.title}>
        <h2 className={cm(styles.tag, name == '已收藏' ? styles.colorWhite : '')}>{name}频道</h2>
        <span className={cm(styles.more, 'hideWhenPhone')} onClick={() => setExpend(!expend)}>
          {expend ? '收起>>' : '展开>>'}
        </span>
      </div>
      <div className={cm('items', styles.items, 'hideWhenPhone')}>
        {data.map((item, index) => {
          if (index + 1 > len) {
            return null
          }
          return (
            <Link href={`/live/${item.url}`} key={index} className={cm('itemLive', styles.item)}>
              <Image initSrc="/images/horizon.png" errorSrc="/images/horizon.png" alt={item.name} src={item.img} />
            </Link>
          )
        })}
      </div>
      {/* h5 */}
      <div className={cm('items', styles.items, 'hideWhenPc', 'scrollBeautify')}>
        {data.map((item, index) => {
          return (
            <Link href={`/live/${item.url}`} key={index} className={cm('itemLive', styles.item)}>
              <Image initSrc="/images/horizon.png" errorSrc="/images/horizon.png" alt={item.name} src={item.img} />
            </Link>
          )
        })}
      </div>
    </div>
  )
}

export default Index
